<template>
  <base-header :showButton="true" :backText="t('keys.back')">
    <template #title>{{ t('keys.notice_content') }}</template>
    <template #header_btns>
      <el-button type="primary" v-if="route.query.readFlag === 'FALSE'" @click="getNoticeReadl">{{ t('keys.confirm') + t('keys.READ') }}</el-button>
    </template>
  </base-header>
  <div class="content-box">
    <div class="info">
      <div class="title">{{ baseInfo.title }}</div>
      <div class="time">{{ baseInfo.publishTime }}</div>
      <div class="com-html" v-html="baseInfo.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue-demi'
import { getNoticeDetailApi, getNoticeReadlApi } from 'api/notice'
import { ElMessage } from 'element-plus'
import { ERR_OK } from 'config/statusCode'
import { useRoute, useRouter } from 'vue-router'
import BaseHeader from 'components/base-header'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const baseInfo = ref({})
const getNoticeDetail = async (id) => {
  const { code, data } = await getNoticeDetailApi({}, id)
  if (code === ERR_OK) {
    baseInfo.value = data
  }
}
const getNoticeReadl = async () => {
  const params = [baseInfo.value.announcementReceiverId]
  const { code, data } = await getNoticeReadlApi(params)
  if (code === ERR_OK) {
    ElMessage({
      message: t('keys.operation_succeeded'),
      type: 'success'
    })
    router.go(-1)
  }
}
getNoticeDetail(route.query.id)
</script>

<style lang="scss" scoped>
.content-box {
  width: calc(100% + 32px);
  background: #f7f8fa;
  padding: 16px 0;
  min-height: calc(100vh);
  margin: 0 -16px;
  .info {
    width: calc(800px - 80px);
    background: #fff;
    margin: 0 auto;
    padding: 24px 40px;
    min-height: 80vh;
    .title {
      font-size: 24px;
      font-weight: 400;
      color: #1d2129;
      line-height: 32px;
      margin-bottom: 4px;
    }
    .time {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f2f3f5;
    }
    .com-html {
      line-height: 22px;
      margin-top: 20px;
    }
  }
}
</style>
<style>
.com-html * {
  max-width: 100% !important;
}
</style>
